<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia';
import { requestSynthesizeSearchResult } from '../../../utils/axiosURL'
import useSearchHistory from '../../../store/searchHistory';

// 请求搜索的关键字
const { keyword_Store } = storeToRefs(useSearchHistory())
// 存储歌手数据
let saveSingerdata = ref<any>([])
onMounted(() => {
    requestSynthesizeSearchResultFn()
})
const requestSynthesizeSearchResultFn = () => {
    requestSynthesizeSearchResult(keyword_Store.value, 100, 1, 0).then((data: any) => {
        console.log(data, '歌手数据');
        saveSingerdata.value = data.result.artists
    }).catch(err => {
        console.log(err);
    })
}

</script>


<template>
    <div class="SingerWrap">
        <div class="SingItem" v-for="item in saveSingerdata" v-if="saveSingerdata.length !== 0">
            <div class="imgWrap">
                <img :src="item.picUrl" alt="">
            </div>
            <div class="DescRight">{{ item.name }}</div>
        </div>
        <AlibumListSkeleton v-else v-for="item in 5" />
    </div>
</template>


<style lang="scss" scoped>
.SingerWrap {
    width: 100%;

    .SingItem {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;
        padding-left: 10px;
        box-sizing: border-box;
        border-radius: 8px;

        .imgWrap {
            flex-basis: 60px;
            width: 60px;
            height: 60px;
            overflow: hidden;
            border-radius: 6px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .DescRight {
            flex: 1;
            margin-left: 10px;
            font-size: $font-size-sm;
            font-family: $activeTextFont;
        }

        &:hover {
            background-color: $BK_GRAY;
        }

        &:nth-child(even) {
            background-color: rgb(242, 242, 243);
        }
    }
}
</style>